<template>
	<view class="start-index">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Dashboard ref="home" v-if="userType == 0 || userType == 2"></Dashboard>
				<Home ref="home" v-if="userType == 1"></Home>
				<Project ref="project" v-if="userType == 3"></Project>
				<Construction ref="construction" v-if="userType == 4"></Construction>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<!-- <Circle ref="circle"></Circle> -->
				<Manager ref="manager" v-if="userType == 0"></Manager>
				<Service ref="service" v-if="userType == 1"></Service>
				<Order ref="order" v-if="userType == 2"></Order>
			</scroll-view>
		</view>
		<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Discovery ref="discovery"></Discovery>
      </scroll-view>
    </view> -->
		<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Message ref="message"></Message>
			</scroll-view>
		</view> -->
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Mineuser ref="mineUser">
					</Mineuser>
			</scroll-view>
		</view>

		<tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
			activeIconColor="#3668FC" :animation="true" :safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
	</view>
</template>

<script>
	import Home from './home/home.vue'
	import Dashboard from './dashboard/dashboard.vue'
	import Manager from './manager/manager.vue'
	import Service from './service/service.vue'
	import Order from './order/order.vue'
	import Project from './project/project.vue'
	import Discovery from './discovery/discovery.vue'
	import Message from './message/message.vue'
	import Mine from './mine/mine.vue'
	import Mineuser from './mineUser/mineUser.vue'
	import Construction from './construction/construction.vue'

	export default {
		components: {
			Home,
			Dashboard,
			// Circle,
			Discovery,
			Message,
			Mine,
			Manager,
			Service,
			Order,
			Mineuser,
			Project,
			Construction
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [
					// {
					//   title: '首页',
					//   activeIcon: 'home-smile-fill',
					//   inactiveIcon: 'home-smile'
					// },
					// {
					//   title: '社区',
					//   activeIcon: 'topics-fill',
					//   inactiveIcon: 'topics'
					// },
					// {
					//   title: '发现',
					//   activeIcon: 'rocket',
					//   inactiveIcon: 'cube',
					//   activeIconColor: '#FFFFFF',
					//   inactiveIconColor: '#FFFFFF',
					//   iconSize: 50,
					//   out: true
					// },
					// {
					//   title: '消息',
					//   activeIcon: 'message-fill',
					//   inactiveIcon: 'message',
					//   count: 12
					// },
					// {
					//   title: '我的',
					//   activeIcon: 'my-fill',
					//   inactiveIcon: 'my'
					// }
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],
				userType: 0
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0)
			this.userType = 2
			if (this.userType == 0) {
				// 管理端
				this.tabbarList = [{
						title: '首页',
						activeIcon: 'home-smile-fill',
						inactiveIcon: 'home-smile'
					},
					{
						title: '订单管理',
						activeIcon: 'baby-fill',
						inactiveIcon: 'baby'
					},
					// {
					// 	title: '消息',
					// 	activeIcon: 'message-fill',
					// 	inactiveIcon: 'message',
					// 	count: 12
					// },
					{
						title: '人员管理',
						activeIcon: 'my-fill',
						inactiveIcon: 'my'
					}
				]
			} else if (this.userType == 1) {
				// 用户端
				this.tabbarList = [{
						title: '首页',
						activeIcon: 'home-smile-fill',
						inactiveIcon: 'home-smile'
					},
					{
						title: '订单状态',
						activeIcon: 'baby-fill',
						inactiveIcon: 'baby'
					},
					// {
					// 	title: '消息',
					// 	activeIcon: 'message-fill',
					// 	inactiveIcon: 'message',
					// 	count: 12
					// },
					{
						title: '我的',
						activeIcon: 'my-fill',
						inactiveIcon: 'my'
					}
				]
			} else if (this.userType == 2) {
				// 项目负责人
				this.tabbarList = [{
						title: '首页',
						activeIcon: 'home-smile-fill',
						inactiveIcon: 'home-smile'
					},
					{
						title: '项目管理',
						activeIcon: 'baby-fill',
						inactiveIcon: 'baby'
					},
					// {
					// 	title: '消息',
					// 	activeIcon: 'message-fill',
					// 	inactiveIcon: 'message',
					// 	count: 12
					// },
					{
						title: '我的',
						activeIcon: 'my-fill',
						inactiveIcon: 'my'
					}
				]
			} else if (this.userType == 3) {
				// 评估人员
				this.tabbarList = [
					{
						title: '项目列表',
						activeIcon: 'baby-fill',
						inactiveIcon: 'baby'
					},
					// {
					// 	title: '我的',
					// 	activeIcon: 'my-fill',
					// 	inactiveIcon: 'my'
					// }
				]
			} else if (this.userType == 4) {
				// 施工人员
				this.tabbarList = [
					{
						title: '施工列表',
						activeIcon: 'baby-fill',
						inactiveIcon: 'baby'
					},
					// {
					// 	title: '我的',
					// 	activeIcon: 'my-fill',
					// 	inactiveIcon: 'my'
					// }
				]
			}
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)
		},
		methods: {
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
				// if (index !== 1) {
				//   this.$refs?.circleRef?.stopAllVideo()
				// }
			},


			// 瀑布流导航页面滚动到底部
			tabbarPageScrollLower(e) {
				if (this.currentIndex === 2) {
					this.$refs.discovery.getRandomData && this.$refs.discovery.getRandomData()
				}
			},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>